<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-课堂作业-单词领读'"> </Breadcrumb>
        <view class="content">
          <LeadRead
            ref="leadRead"
            v-if="componentKey > 0"
            :chapterData="chapterData"
            :wordData="wordData"
            :isNeedRecord="true"
            :key="componentKey"
            @change="wordChange"
            @save="handleSaveRecord"
            @show="handleShow"
          >
          </LeadRead>
        </view>
      </view>
    </view>
    <u-mask :show="endFlag" :zoom="false">
      <view class="popup_container">
        <view class="popup_img">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="popup_txt" v-if="hasGold">
          恭喜你！本单元课堂作业已完成。奖励你{{ goldNum }}个金币
        </view>
        <view class="popup_txt" v-else> 恭喜你！本单元课堂作业已完成。 </view>
        <view class="popup_button">
          <view class="popup_button_content" @click="handleReport()"
            ><text>作答报告</text></view
          >
          <view class="popup_button_content active" @click="handleBack()"
            ><text>返回</text></view
          >
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { findWordReadByChapterId, classworkReadSave } from "@/api/classWork";
export default {
  components: {},
  data() {
    return {
      chapterId: "",
      chapterData: null,
      wordData: null,
      componentKey: 0,
      value: false,
      endFlag: false,
      hasGold: true,
      goldNum: 0,
    };
  },
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.init();
  },
  methods: {
    init() {
      //default
      this.wordChange();
    },
    wordChange() {
      this.getWord().then(() => {
        this.componentKey += 1;
      });
    },
    async getWord() {
      let params = {
        id: this.chapterId,
      };
      await findWordReadByChapterId(params).then((res) => {
        this.chapterData = res.data.bookChapter;
        this.wordData = res.data.word;
        this.value = res.data.memoFlag;
      });
    },
    handleSaveRecord(score) {
      let params = {
        wordId: this.wordData.id,
        chapterId: this.chapterId,
        score: score,
      };
      classworkReadSave(params).then((res) => {
        this.$refs.leadRead.handleSaveData(
          res.data.endFlag,
          res.data.hasGold,
          res.data.goldNum
        );
      });
    },
    handleShow(endFlag, hasGold, goldNum) {
      this.endFlag = endFlag;
      this.hasGold = hasGold;
      this.goldNum = goldNum;
    },
    handleReport() {
      uni.redirectTo({
        url: `/pages/classWork/classWorkReport?chapterId=${this.chapterId}&type=1`,
      });
    },
    handleBack() {
      uni.redirectTo({
        url: "/pages/classWork/classWork",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./classWorkReadDetail";
</style>
